<template>
  <view class="orders-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-icon" @click="navigateBack">
        <text class="iconfont icon-back">&lt;</text>
      </view>
      <text class="title">我的换班</text>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(order, index) in orders" :key="index" @click="viewOrderDetail(order)">
        <!-- 订单内容 -->
        <view class="order-content">
          <view class="order-info">
            <text class="order-title">{{order.title}}</text>
          </view>
          <!-- 复制话术按钮 -->
          <view class="copy-section">
            <button class="copy-btn" @click.stop="copyScript(order.script)">复制沟通话术</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        {
          id: 1,
          title: '3.15 广州->上海 FAT 320',
          script: '您好，我看到您发布的3月15日广州飞上海FAT320航班的换班需求。我这边时间合适，可以配合换班，不知道您是否还在找人？'
        },
        {
          id: 2,
          title: '3.16-18 广州->墨尔本 BAT 787换往意大利',
          script: '您好，我看到您发布的3月16-18日广州飞墨尔本BAT787航班的换班需求。我这边有意向，方便详聊吗？'
        }
      ]
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    viewOrderDetail(order) {
      // 跳转到订单详情页面
      uni.navigateTo({
        url: `/pages/profile/orders/detail/index?id=${order.id}`
      })
    },
    copyScript(script) {
      uni.setClipboardData({
        data: script,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.orders-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  position: relative;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  font-size: 36rpx;
  color: #333;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.order-list {
  padding: 20rpx;
}

.order-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.order-content {
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-info {
  flex: 1;
}

.order-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.copy-section {
  margin-left: 20rpx;
}

.copy-btn {
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #576b95;
  background-color: #f5f7fa;
  border-radius: 24rpx;
  border: none;
  
  &::after {
    border: none;
  }
}
</style> 